<template>
    <el-tabs tab-position="left">
        <el-tab-pane label="用户管理">
            <el-form ref="form1" :model="form1" label-width="80px">
                <div class="demo-image__preview">
                    <el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList">
                    </el-image>
                </div>
                <el-form-item label="昵称">
                    <el-input v-model="form1.name"></el-input>
                </el-form-item>
                <el-form-item label="状态：">
                    <el-radio-group v-model="form1.resource">
                        <el-radio label="在上学"></el-radio>
                        <el-radio label="在职"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="毕业时间">
                    <el-col :span="35">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form1.date"
                            style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="职位">
                    <el-input v-model="form1.work" placeholder="请输入职位"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">修改</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>

        <el-tab-pane label="账号密码">
            <el-form ref="form2" :model="form2" label-width="80px">
                <el-form-item label="手机">
                    <el-input v-model="form2.iphone"></el-input>
                    <el-button type="primary" @click="onSubmit">修改</el-button>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="form2.email"></el-input>
                    <el-button type="primary" @click="onSubmit">修改</el-button>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="form2.password"></el-input>
                    <el-button type="primary" @click="onSubmit">修改</el-button>
                </el-form-item>
                <el-form-item label="微信">
                    <el-input v-model="form2.wechat"></el-input>
                    <el-button type="primary" @click="onSubmit">修改</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>

    </el-tabs>

    <div id="right2" v-show="key === '2'">

    </div>
</template>
<style scoped>
* {
    font-size: 20px;

}

el-tabs {
    height: 100%;
}

button {
    border: none;
    background-color: white;
}

#right1 {
    float: right;
    display: grid;
}

#right2 {
    float: right;
    display: grid;
}

/* @import url("//unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css"); */
</style>
<script>
export default {
    data() {
        return {
            form1: {
                name: '沈君霞',
                date: '2022-06-01',
                work: '',
                img: ''
            },
            form2: {
                iphone: '12312312312',
                email: '12312312312@qq.com',
                password: '123123',
                wechat: '12312312312',
            }
        }

    },
    methods: {
        onSubmit() {
            console.log('修改成功!');
        },
    }
}

</script>
